<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../../dist/css/item.css">
    <link rel="stylesheet" href="../../fonts/iconfont.css">
</head>

<body>
    <div class="top">
        <h1>
            <img src="../images/logo_03.jpg" alt="">
        </h1>
        <ul class="top_ul">
            <li><a class="before">7T系列<span class="iconfont icon-new1"></span>
                <div class="show">
                    <div class="show-in">
                        <p>
                            <span class="iconfont icon-dianhua1"></span><br>
                            <i>OnePuls7T</i>
                        </p>
                        <p>
                            <span class="iconfont icon-dianhua1"></span><br>
                            <i>OnePuls7T</i>
                        </p>
                        <p>
                            <span class="iconfont icon-dianhua1"></span><br>
                            <i>OnePuls7T</i>
                        </p>
                    </div>
                </div>
            </a></li>
            <li><a>7系列</a></li>
            <li><a>商城</a></li>
            <li><a>品牌</a></li>
            <li><a>服务</a></li>
            <li><a>论坛</a></li>
            <li><a>零售店</a></li>
        </ul>
        <div class="top_r">
            <a class='topr-login iconfont icon-yonghu2'>
                   
            </a>
            <div class="topr-show">
                <p>订单</p>
                <p>账户</p>
                <p>推荐有礼</p>
                <p id="user"><a href="scr/html/login.html">登录</a></p>
            </div>


        <a href="myCart.html" class="iconfont icon-Newuserzone"></a>
        <a class="iconfont icon-sousuo3"></a>
        </div>
    </div>

    <!-- 商品详情 -->
    <div class="item-warp">
        <div class="item">
            <div class="item-l">
                <img src="" alt="">
            </div>
            <div class="item-r">
                <h2>一加旅行双肩包</h2>
                <div class="price"><del>￥129.00</del><p>￥38.70</p></div>
                <button>加入购物车</button>
                <p>库存：有货</p>
                <div>
                    <p>售后政策</p>
                    <div class="tips">七天无理由退货<span class="iconfont icon-sanjiaoyou" style="color:#000;font-size: 12px;cursor: pointer;"></span></div>
                </div>
                
                <div class="border">
                    <p>物流信息</p>
                    <div class="tips">全场满99元包邮，当天18点前支付24小时内发货<span class="iconfont icon-sanjiaoyou" style="color:#000;font-size: 12px;cursor: pointer;"></span></div>
                </div>
                <div>
                    <p>支付方式</p>
                    <img src="../images/zhi_03.jpg" class="zhi" alt="">
                </div>

            </div>
        </div>
    </div>

    <div class="tab">
        <ul>
            <li>详情</li>
            <li>评价</li>
        </ul>
    </div>
    <script src="../js/jquery-1.11.3.min.js"></script>
    <script src="../js/item.js"></script>
    <script>
        $('.topr-login').hover(function(){
            $('.top_r .topr-show').css({
                display:'block'
            })
        },function(){
            $('.top_r .topr-show').css({
                display:'none'
            })
        })
        $('.top_r .topr-show').hover(function(){
            $('.top_r .topr-show').css({
                display:'block'
            })
        },function(){
            $('.top_r .topr-show').css({
                display:'none'
            })
        })
        ////////------------商品详情页获取到地址栏的商品id
        let user = localStorage.getItem("username")
        let uid = localStorage.getItem("uid")
        if(user){
            $('#user').html("用户：" + user + '&nbsp;&nbsp;<a id="userOut" href="javscript:;">退出</a>')
            $('#userOut').click(function () {
                localStorage.clear()
            })
        }
        let params = new URLSearchParams(location.search.slice(1))
        let pid = params.get('pid')
        $.ajax({
            url:"http://jx.xuzhixiang.top/ap/api/detail.php",
            type:"get",
            data:{
                id:pid
            }
        }).then(res=>{
            let obj = res.data;
            let html = `
            <div class="item-l">
                <img class="item-l-img" src="../images/${obj.pimg}" alt="">
            </div>
            <div class="item-r">
                <h2>${obj.pname}</h2>
                <div class="price"><del>￥129.00</del><p>￥${obj.pprice}</p></div>
                <button id="add-cart" data-pid="${obj.pid}">加入购物车</button>
                <p>库存：有货</p>
                <div>
                    <p>售后政策</p>
                    <div class="tips">七天无理由退货<span class="iconfont icon-sanjiaoyou" style="color:#000;font-size: 12px;cursor: pointer;"></span></div>
                </div>
                
                <div class="border">
                    <p>物流信息</p>
                    <div class="tips">全场满99元包邮，当天18点前支付24小时内发货<span class="iconfont icon-sanjiaoyou" style="color:#000;font-size: 12px;cursor: pointer;"></span></div>
                </div>
                <div>
                    <p>支付方式</p>
                    <img src="../images/zhi_03.jpg" class="zhi" alt="">
                </div>

            </div>
            `
            $('.item').html(html)
            $(".item-l-img").css({width:'100%',height:'100%'})

            ////------------加入购物车按钮事件
            $('#add-cart').on('click',function(){
                let pid = $(this).attr("data-pid")
                //给用户购物车中添加商品 接口
                $.ajax({
                    url:"http://jx.xuzhixiang.top/ap/api/add-product.php",
                    type:"get",
                    data:{
                        uid,
                        pid,
                        pnum:1
                    }
                }).then(res=>{
                    // console.log(res);
                   alert("添加成功")
                }) 
            })
        })
        
    </script>
</body>

</html>